<template>
	<view>
		<view class="title_view flex-r-b-c">
			<text class="title_text">预约门店</text>
			<text class="title_text2">{{obj.dizhi}}</text>
		</view>
		<view class="title_view flex-r-b-c">
			<text class="title_text">手机号码</text>
			<text class="title_text2">{{onload_obj.mobile}}</text>
		</view>
		<view class="title_view flex-r-b-c">
			<text class="title_text">到达时间</text>
			<text class="title_text2">{{onload_obj.date}}</text>
		</view>
		<view class="view1">
			<view class="view2">
				<view class="view2_title flex-r-s-c">
					<text>服务详情：</text>
				</view>
				<view class="view3 flex-r-s-c" v-for="(v,i) in obj.service" :key='i'>
					<view class="view3_img">
						<image :src="base.imgUrl+v.image" mode=""></image>
					</view>
					<view class="view3_text flex-c-b-s">
						<text class="view3_text1">{{v.sname}}</text>
						<text class="two-line-ellipsis view3_text2">{{v.intro}}</text>
						<view class="flex-r-b-c view3_text3">
							<!-- <text class="view3_text3_text1">¥ 599</text> -->
							<view class="view3_text3_text2 flex-r-s-c">服务时长: <text
									style="color: #FF6C1D;">{{v.sminute}}</text>分钟</view>
							<text class="view3_text3_text2">X 1</text>
						</view>
					</view>
				</view>
			</view>
			<view class="view2" style="margin-top: 30rpx;margin-bottom: 50rpx;">
				<view class="view2_title flex-r-s-c">
					<text>服务技师：</text>
				</view>
				<view class="flex-r-s-c" v-for="(v,i) in obj.tec" :key='i'>
					<view class="flex-r-b-c" style="width: 100%;padding: 20rpx;">
						<view class="flex-r-s-c">
							<text style="color: #959595;font-size: 24rpx;">{{v.tname}}</text>
							<text
								:style="{color:v.type===0?'#959595':'#45806E',fontSize:'24rpx'}">{{v.type===0?'(系统分配)':'(自主选择)'}}</text>
						</view>
						<text style="font-size: 32rpx;color: #333333;font-weight: 600;">{{v.name}}</text>
					</view>
				</view>
			</view>
			<view class="tj_view1 flex-c-c-c" v-for="(v,i) in tj_list" :key='i' @click="tj_active=!tj_active">
				<view class="tj_view1_sp flex-r-b-c">
					<view class="tj_view1_sp_img flex-c-c-c">
						<image :src="base.imgUrl +v.image" mode="widthFix" style="width: 100%;height: 100%;"></image>
					</view>
					<view class="tj_view1_sp_text flex-c-b-s">
						<text style="color: #3B3B3B;font-size: 36rpx;font-weight: 600;">{{v.name}}</text>
						<text class="two-line-ellipsis" style="color: #777777;font-size: 24rpx;">{{v.describe}}</text>
						<view class="flex-r-s-c">
							<text style="color: #FF6C1D;font-size: 34rpx;">¥ </text>
							<text
								style="font-weight: bold;color: #FF6C1D;font-size: 42rpx;margin-left: 5rpx;">{{v.price}}</text>
							<text style="margin-left: 10rpx;color: #909090;font-size: 20rpx;">原价</text>
							<text style="margin-left: 8rpx;color: #A2A2A2;font-size: 32rpx;">¥ </text>
							<text
								style="margin-left: 8rpx;color: #A2A2A2;font-size: 34rpx;text-decoration:line-through;">{{v.orginal_price}}</text>
						</view>
					</view>
				</view>
				<view class="tj_view1_sp_top flex-r-c-c">
					<image src="../../static/icon/zan.png" mode="widthFix" style="width: 25rpx;"></image>
					<text style="color: #FFFFFF;font-size: 28rpx;margin-left: 8rpx;">项目推荐</text>
				</view>
				<view class="tj_view1_sp_bott flex-r-b-e">
					<!-- <text style="color: #505050;font-size: 24rpx;">预计享用10次</text> -->
					<view class="gou flex-c-c-c"
						:style="{backgroundColor:tj_active?'#FF6C1D':'#FFF',borderColor:tj_active?'#FF6C1D':'#707070'}">
						<u-icon name="checkbox-mark" :color="tj_active?'#FFF':'#707070'" size="25"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view style="width: 750rpx;height: 100rpx;"></view>
		<!-- 		<view class="bottom_view flex-r-b-c">
			<view class="imgs_bott">
				<image src="../../static/icon/shoping.png" mode="widthFix"></image>
				<u-badge is-center="true" count='1' bgColor="#FF6C1D" class="badge"></u-badge>
			</view>
			<view class="bottom_btn flex-c-c-c" @click="bnt()">
				<text>下一步</text>
			</view>
		</view> -->
		<view style="background-color:#FFFFFF;" class="nextStep">
			<view class="nextStepBtn" @click="saixuan()">下一步</view>
		</view>
		<!-- 支付弹框 -->
		<u-popup class="couponPopup" v-model="zf_show" mode="bottom" border-radius="20" height="70%" closeable>
			<view class="flex-c-c-c" style="color: #4A4A4A;font-size: 32rpx;line-height: 100rpx;">选择支付方式</view>
			<!-- 微信支付 -->
			<view class="flex-r-b-c"
				style="padding: 0rpx 34rpx;height: 100rpx;border-bottom: 1rpx solid #F2F2F2;margin-top: 50rpx;">
				<view class="flex-r-b-c">
					<u-icon name="weixin-fill" color="#00BC0C" size="55"></u-icon>
					<text style="color:#4B4B4B;font-size: 28rpx;font-weight: bold;margin-left: 28rpx;">微信支付</text>
				</view>
				<u-checkbox-group style="margin-right: -30rpx;">
					<u-checkbox v-model="isVXpay" @change="isBalancePay=false" shape="circle" active-color="#52C41A"
						size="47" icon-size="30"></u-checkbox>
				</u-checkbox-group>
			</view>
			<!-- 余额支付 -->
			<!-- <view class="flex-r-b-c" style="padding: 0rpx 34rpx;height: 100rpx;border-bottom: 1rpx solid #F2F2F2;">
				<view class="flex-r-b-c">
					<image src="../../static/icon/yue.png" mode="widthFix" style="width: 45rpx;"></image>
					<text style="color:#4B4B4B;font-size: 28rpx;font-weight: bold;margin-left: 28rpx;">余额支付</text>
					<text style="color: #4B4B4B;font-size: 24rpx;margin-left: 24rpx;">当前余额：¥{{balance}}</text>
				</view>
				<u-checkbox-group style="margin-right: -30rpx;" v-if="balance>=totalPrice">
					<u-checkbox v-model="isBalancePay" @change="isVXpay=false" shape="circle" active-color="#52C41A"
						size="47" icon-size="30"></u-checkbox>
				</u-checkbox-group>
				<text style="color: #FF6C1D;font-size: 28rpx;" v-else>去充值</text>
			</view> -->
			<view class="flex-c-c-c"
				style="width:686rpx;height: 90rpx;background-color:#45806E;border-radius: 58rpx;font-size: 32rpx;color: #FFF;position: fixed;bottom:108rpx;left: 32rpx;"
				@click="fk_fn()">
				确认支付
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				zf_show: false,
				tj_active: false,
				tj_list: [],
				obj: {},
				base: this.$base,
				onload_obj: {},
				zf_active: 1,
				isVXpay: true, //默认微信支付
				balance: 30, //我的余额
				isBalancePay: false, //是否使用余额支付
			}
		},
		onLoad(el) {
			console.log(el)
			// this.onload_obj={
			// 	service_id:'7,1,2',
			// 	date:'2022-01-04 10:00',
			// 	id:1,
			// 	id_name:'魏琴'
			// }
			this.onload_obj = el
			this.$api.Service_serviceConfirm(this.onload_obj).then(res => {
				console.log(res)
				this.obj = res.data.data
				this.onload_obj.mobile = res.data.data.mobile
				this.obj.dizhi = uni.getStorageSync('store_dz').name
			})
			this.$api.Goods_recommendGoods().then(res => {
				this.tj_list = res.data.data.data
			})
		},
		methods: {
			fk_fn() { //微信支付
				if (!this.isVXpay) return
				let that = this,
					obj = {
						goods: [{id: that.tj_list[0].id, num: 1}], //商品id及数量
						type: 2, //是否使用积分1-是2-否
						address_type: 1, //1-门店自提2-邮寄到家
						appointment_id: that.obj.id
					}
				that.$api.Order_submit(obj).then(res => {
					if (res.data.code === 1000) {
						uni.requestPayment({
							provider: 'wxpay',
							...res.data.data.prePay,
							success: function(res) {
								that.bnt()
								console.log('success:' + JSON.stringify(res));
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
							}
						});
					} else {
						uni.showToast({
							title: '订单生成错误,请重试!',
							icon: "none"
						})
					}

				})
			},
			saixuan() {
				if (this.tj_active) {
					this.zf_show = true
				} else {
					this.bnt()
				}
			},
			zf_btn_fn() { //确认支付按钮
				uni.navigateTo({
					url: '/order/ordersTrue/ordersTrue'
				})
			},
			bnt() { //提交服务

				this.$api.Service_submit({
					id: this.obj.id
				}).then(res => {
					uni.showToast({
						title: '预约成功',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: `/order/ordersTrue/ordersTrue?type=${this.tj_active?3:1}`
						})
					}, 1000)
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.title_view {
		width: 750rpx;
		height: 102rpx;
		background: #FFFFFF;
		padding: 0px 34rpx;
		border-bottom: 1rpx solid #F2F2F2;

		.title_text {
			font-size: 28rpx;
			color: #535353;
		}

		.title_text2 {
			font-size: 32rpx;
			color: #333333;
		}
	}

	.view1 {
		padding: 20rpx 32rpx;

		.view2 {
			width: 686rpx;
			background: #FFFFFF;
			opacity: 1;
			border-radius: 12rpx;
			overflow: hidden;

			.view2_title {
				border-bottom: 1rpx solid #F2F2F2;
				height: 74rpx;
				padding: 0px 20rpx;

				text {
					font-size: 28rpx;
					font-weight: bold;
					color: #0F4C3A;
				}
			}
		}

		.view3 {
			height: 242rpx;
			padding: 21rpx 20rpx;
			border-bottom: 1rpx solid #F2F2F2;

			.view3_img {
				width: 200rpx;
				height: 200rpx;
				background: #f4f4f4;
				opacity: 1;
				overflow: hidden;
				border-radius: 12rpx;

				image {
					width: 200rpx;
					height: 200rpx;
				}
			}

			.view3_text {
				margin-left: 20rpx;
				height: 200rpx;
				width: 430rpx;

				.view3_text1 {
					font-size: 36rpx;
					font-weight: bold;
					color: #3B3B3B;
				}

				.view3_text2 {
					font-size: 24rpx;
					color: #777777;
				}

				.view3_text3 {
					height: 50rpx;
					width: 100%;

					.view3_text3_text1 {
						font-size: 42rpx;
						font-weight: bold;
						color: #FF6C1D;
					}

					.view3_text3_text2 {
						font-size: 28rpx;
						color: #959595;
					}
				}
			}
		}
	}

	.buju {
		height: 84rpx;
		width: 100%;
		background: #FFFFFF;
		border-bottom: 1rpx solid #F2F2F2;
		padding: 0px 34rpx;
	}

	.hd:after {
		content: " ";
		height: 12rpx;
		width: 12rpx;
		border-width: 4rpx 4rpx 0 0;
		border-color: #ACACAC;
		border-style: solid;
		transform: rotate(45deg);
		position: absolute;
		margin-top: -8rpx;
		top: 50%;
		right: 0;
	}

	.tj_view1 {
		margin-top: 20rpx;
		width: 100%;
		height: 380rpx;
		background: #FFFFFF;
		border: 2rpx solid #FE7853;
		border-radius: 12rpx;
		position: relative;
		overflow: hidden;
		margin-bottom: 100rpx;

		.tj_view1_sp {
			padding: 0px 16rpx 0rpx 26rpx;
			height: 200rpx;

			.tj_view1_sp_img {
				height: 200rpx;
				width: 200rpx;
				border-radius: 12rpx;
				background-color: #F4F4F4;
			}

			.tj_view1_sp_text {
				height: 200rpx;
				width: 424rpx;
				margin-left: 20rpx;

			}
		}

		.tj_view1_sp_top {
			position: absolute;
			top: 0;
			left: 0;
			width: 192rpx;
			height: 56rpx;
			border-bottom-right-radius: 12rpx;
			background: linear-gradient(162deg, #FE9871 0%, #FD613E 100%);
		}

		.tj_view1_sp_bott {
			position: absolute;
			bottom: 26rpx;
			right: 16rpx;
			height: 38rpx;

			.gou {
				margin-left: 20rpx;
				height: 38rpx;
				width: 38rpx;
				border-radius: 50%;
				border-width: 3rpx;
				border-style: solid;
			}
		}
	}

	.bottom_view {
		position: fixed;
		bottom: env(safe-area-inset-bottom);
		bottom: constant(safe-area-inset-bottom);
		left: 0;
		height: 100rpx;
		padding: 0px 32rpx;
		width: 100%;
		background-color: #FFFFFF;
		z-index: 99;

		.imgs_bott {
			width: 60rpx;
			position: relative;

			image {
				width: 60rpx;
			}

			.badge {
				background-color: #FF6C1D;
				color: #FFFFFF;
			}
		}

		.bottom_btn {
			width: 100%;
			height: 72rpx;
			background: #45806E;
			border-radius: 42rpx;

			text {
				font-size: 32rpx;
				font-weight: 500;
				line-height: 44rpx;
				color: #FFFFFF;
			}
		}
	}

	.popup_zf_bott {
		height: 860rpx;
		width: 750rpx;
		position: relative;
		padding: 32rpx 32rpx;

		.taber_bottom_popup {
			height: 100rpx;
			width: 100%;
			border-bottom: 2rpx solid #F2F2F2;

			.bottom_icon {
				width: 41rpx;
				height: 41rpx;
				border-radius: 50%;
				border-width: 3rpx;
				border-style: solid;
			}
		}

		.bottom_btn_popup {
			position: absolute;
			bottom: 108rpx;
			left: 32rpx;
			height: 90rpx;
			width: 686rpx;
			background: #45806E;
			border-radius: 58rpx;
		}
	}
</style>
